<template>
  <div class="page-main" v-title data-title="报工数据变设置">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>报工数据变设置</span></div>
    <div class="container">
      <div class="header">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col style="display: flex; justify-content: start">
            <a-button class="hte-btn del-btn" @click="showDetail(null)">新建</a-button>
            <a-button class="hte-btn del-btn" @click="handleSearch">刷新</a-button>
          </a-col>
          <a-col style="display: flex; justify-content: end">
            <a-button class="hte-btn del-btn" @click="showSearchForm = true">高级搜索</a-button>
          </a-col>
        </a-row>
      </div>

      <a-modal
        :visible="showSearchForm"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @ok="handleSearch"
        @cancel="showSearchForm = false"
      >
        <a-form-model
          ref="ruleForm"
          :laba-col="labelCol"
          :wrapper-col="wrapperCol"
          @keyup.enter.native="handleToSearch"
        >
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="表名:">
                <a-input v-model="searchForm.tableName" allowClear> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="业务名称">
                <a-input v-model="searchForm.busName" allowClear> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="是否有效:">
                <a-radio-group v-model="searchForm.isVaild" button-style="solid">
                <a-radio-button v-for="(item, index) in yesOrNotOpt" :key="'taskType_' + index" :value="item.code"
                  >{{ item.name }}
                </a-radio-button>
              </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
      <div class="content-list">
        <a-table
          class="hte-table-content"
          :columns="columns"
          :data-source="records"
          :pagination="false"
          :rowKey="(record) => record.id"
          bordered
        >
          <template slot="sortIndexRender" slot-scope="text, record, index">
            {{ index + 1 }}
          </template>
          <template slot="tableNameRender" slot-scope="text,record">
            <span class="font-active" @click="showDetail(record.id)"> {{text}}</span>
          </template>
          <template slot="isVaildRender" slot-scope="text">
            <span v-if="text=='1'"> 有效 </span>
            <span v-else> 无效 </span>
          </template>
        </a-table>
        <a-pagination
          show-size-changer
          :default-current="1"
          :total="searchForm.total"
          @change="pageChange"
          @showSizeChange="onShowSizeChange"
          :show-total="(total) => `共 ${total} 条记录`"
        />
      </div>
    </div>
    <dataChangeSettingDetail ref="dataChangeSettingDetail" @saveSuccess="fetchList"/>
  </div>
</template>
<script>
import { postAction } from '@/api/manage'
export default {
  name: 'hteDataChangeSetting',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    dataChangeSettingDetail: () => import('@/views/dataChange/dataChangeSettingDetail'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'hteDataChangeSetting',
      },
      urls: {
        page: '/hteDataChangeSettiing/page',
        
      },
       yesOrNotOpt: [
        { code: 1, name: '有效' },
        { code: 2, name: '无效' },
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'sortIndex',
          scopedSlots: { customRender: 'sortIndexRender' },
          width: '80px',
          align: 'center',
        },
        {
          title: '表名',
          dataIndex: 'tableName',
          align: 'center',
           width: '180px',
           scopedSlots: { customRender: 'tableNameRender' },
        },
        {
          title: '业务表',
          dataIndex: 'busName',
          align: 'center',
          width:'180px'
        },
        {
          title: '是否有效',
          dataIndex: 'isVaild',
          align: 'center',
          width:'180px',
          scopedSlots: { customRender: 'isVaildRender' },
        },
      ],
      showSearchForm: false,
      records: [],
      selectedRowKeys: [],
      selectedRow: [],
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      searchForm: {
        offset: 0,
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
      },
    }
  },

  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      let url = this.urls.page
      postAction(url, this.searchForm).then((res) => {
        if (res.code == 200) {
          this.records = res.result.records
          this.$set(this.searchForm, 'total', res.result.total)
          this.showSearchForm = false
        } else {
          this.$message.error('获取数据失败')
        }
      })
    },
    handleSearch() {
      this.$set(this.searchForm, 'current', 1)
      this.fetchList()
    },
    pageChange(current, pageSize) {
      this.$set(this.searchForm, 'pageSize', pageSize)
      this.$set(this.searchForm, 'current', current)
      this.fetchList()
    },
    onShowSizeChange(current, pageSize) {
      this.$set(this.searchForm, 'pageSize', pageSize)
      this.$set(this.searchForm, 'current', 1)
      this.fetchList()
    },
    showDetail(id){
      this.$refs.dataChangeSettingDetail.init(id)
    }
  },
}
</script>

<style scoped>
.demo-table-expand .a-form-model-item {
  margin-right: 0;
  margin-bottom: 0px;
}
.demo-table-expand span {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.a-form-model-item >>> .a-form-model-item--mini .a-form-model-item__label {
  color: #606266 !important;
  font-size: 12px !important;
  font-weight: normal;
}
.a-table >>> .a-table__expanded-cell[class*='cell'] {
  padding: 0px 0px 10px 0px;
}

.expand-title {
  height: 30px;
  line-height: 30px;
  background-color: #f1f1f1;
  padding-left: 50px;
  margin-bottom: 5px;
  font-size: 12px;
}
.a-form-model-item >>> .a-form-model-item__content {
  height: 36px;
}
.ellipse-tooltips {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipse-tooltips span {
  width: unset !important;
}
.a-range >>> .a-range-separator {
  width: 20px;
}
.searchForm {
  display: flex;
  flex-direction: row;
}
.searchForm-left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 85vw;
}
.searchForm-right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 280px;
  border-left: #cccccc 2px solid;
}
</style>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {
    background-image: url(~@assets/contract-top.png);
  }
  .container {
    .content-list {
      margin-top: 15px;
    }
  }
  .font-active {
    cursor: pointer;
  }
}
/deep/ #process-container {
  width: unset !important;
}
#process-container {
  background: #fff;
  padding: 40px 22px;
  width: auto;
  margin: 0 auto;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
/deep/ .ant-modal-body {
  height: 60vh;
  overflow-y:auto;
}
.kala_text {
  white-space: pre-wrap;
  word-break: break-word;
  text-align: center;
  word-wrap: break-word;
  white-space: pre-wrap;
}
</style>

